import React from 'react';
import {
  Drawer,
  Card,
  Space,
  Switch,
  Button,
  Divider,
  Typography,
  Row,
  Col,
  ColorPicker,
  Radio,
  Tooltip
} from 'antd';
import {
  SettingOutlined,
  BulbOutlined,
  MenuOutlined,
  AppstoreOutlined,
  LayoutOutlined
} from '@ant-design/icons';
import { useThemeConfig, LAYOUT_TYPES } from '../../contexts/ThemeConfigContext';

const { Title, Text } = Typography;

const ThemeSettings = ({ open, onClose }) => {
  const {
    isDark,
    layoutType,
    primaryColor,
    isLayoutChanging,
    showDemoFeatures,
    toggleTheme,
    setLayoutType,
    changeLayoutWithAnimation,
    setPrimaryColor,
    toggleDemoFeatures,
    currentColors
  } = useThemeConfig();

  const layoutOptions = [
    {
      value: LAYOUT_TYPES.SIDEBAR,
      label: '侧边菜单布局',
      icon: <MenuOutlined />,
      description: '经典的侧边栏导航布局'
    },
    {
      value: LAYOUT_TYPES.TOPBAR,
      label: '顶部菜单布局',
      icon: <AppstoreOutlined />,
      description: '顶部横向菜单布局'
    },
    {
      value: LAYOUT_TYPES.MIXED,
      label: '混合菜单布局',
      icon: <LayoutOutlined />,
      description: '顶部+侧边混合布局'
    }
  ];

  const presetColors = [
    '#1890ff', // 默认蓝色
    '#722ed1', // 紫色
    '#13c2c2', // 青色
    '#52c41a', // 绿色
    '#fa8c16', // 橙色
    '#eb2f96', // 粉色
    '#f5222d', // 红色
    '#faad14', // 黄色
  ];

  return (
    <Drawer
      title={
        <Space>
          <SettingOutlined />
          主题设置
        </Space>
      }
      placement="right"
      onClose={onClose}
      open={open}
      width={360}
      styles={{
        body: { padding: 16 }
      }}
    >
      <Space direction="vertical" style={{ width: '100%' }} size="large">
        {/* 主题模式 */}
        <Card size="small" title="主题模式">
          <Space direction="vertical" style={{ width: '100%' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Space>
                <BulbOutlined />
                <Text>深色模式</Text>
              </Space>
              <Switch
                checked={isDark}
                onChange={(checked, e) => toggleTheme(e)}
                checkedChildren="🌙"
                unCheckedChildren="☀️"
              />
            </div>
            <Text type="secondary" style={{ fontSize: 12 }}>
              {isDark ? '当前为深色主题模式' : '当前为浅色主题模式'}
              {document.startViewTransition ? ' (支持圆形扩散动画)' : ' (浏览器不支持动画效果)'}
            </Text>
          </Space>
        </Card>

        {/* 演示功能 */}
        <Card size="small" title="演示功能">
          <Space direction="vertical" style={{ width: '100%' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Space>
                <BulbOutlined />
                <Text>是否显示</Text>
              </Space>
              <Switch
                checked={showDemoFeatures}
                onChange={(checked) => toggleDemoFeatures(checked)}
                checkedChildren="开启"
                unCheckedChildren="关闭"
              />
            </div>
            <Text type="secondary" style={{ fontSize: 12 }}>
              开启路由将显示测试功能页面
            </Text>
          </Space>
        </Card>

        {/* 主色调 */}
        <Card size="small" title="主色调">
          <Space direction="vertical" style={{ width: '100%' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Text>当前主色</Text>
              <ColorPicker
                value={primaryColor}
                onChange={(color) => setPrimaryColor(color.toHexString())}
                showText
                size="small"
              />
            </div>

            <Text type="secondary" style={{ fontSize: 12, marginBottom: 8 }}>
              预设颜色
            </Text>
            <Row gutter={[8, 8]}>
              {presetColors.map(color => (
                <Col span={6} key={color}>
                  <Tooltip title={color}>
                    <div
                      style={{
                        width: 32,
                        height: 32,
                        backgroundColor: color,
                        borderRadius: 6,
                        cursor: 'pointer',
                        border: primaryColor === color ? '2px solid #000' : '1px solid #d9d9d9',
                        transition: 'all 0.2s',
                      }}
                      onClick={() => setPrimaryColor(color)}
                    />
                  </Tooltip>
                </Col>
              ))}
            </Row>
          </Space>
        </Card>

        {/* 布局设置 */}
        <Card size="small" title="布局设置">
          <Space direction="vertical" style={{ width: '100%' }} size="middle">
            <Text type="secondary" style={{ fontSize: 12 }}>
              {isLayoutChanging ? '布局切换中，请稍候...' : '选择你喜欢的布局模式'}
            </Text>

            <Space direction="vertical" style={{ width: '100%' }}>
              {layoutOptions.map(option => (
                <Card
                  key={option.value}
                  size="small"
                  hoverable
                  style={{
                    cursor: isLayoutChanging ? 'not-allowed' : 'pointer',
                    border: layoutType === option.value ? `2px solid ${primaryColor}` : '1px solid #d9d9d9',
                    background: layoutType === option.value ? `${primaryColor}08` : 'transparent',
                    opacity: isLayoutChanging ? 0.6 : 1,
                    pointerEvents: isLayoutChanging ? 'none' : 'auto',
                  }}
                  onClick={(e) => {
                    e.stopPropagation(); // 防止事件冒泡
                    if (!isLayoutChanging && option.value !== layoutType) {
                      changeLayoutWithAnimation(option.value, e);
                    }
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    {/* 自定义选中指示器 */}
                    <div
                      style={{
                        width: 16,
                        height: 16,
                        borderRadius: '50%',
                        border: `2px solid ${layoutType === option.value ? primaryColor : '#d9d9d9'}`,
                        backgroundColor: layoutType === option.value ? primaryColor : 'transparent',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        flexShrink: 0,
                      }}
                    >
                      {layoutType === option.value && (
                        <div
                          style={{
                            width: 6,
                            height: 6,
                            borderRadius: '50%',
                            backgroundColor: 'white',
                          }}
                        />
                      )}
                    </div>

                    <Space style={{ flex: 1 }}>
                      {option.icon}
                      <div>
                        <div style={{ fontWeight: 500 }}>{option.label}</div>
                        <Text type="secondary" style={{ fontSize: 12 }}>
                          {option.description}
                        </Text>
                      </div>
                    </Space>
                  </div>
                </Card>
              ))}
            </Space>
          </Space>
        </Card>

        {/* 重置设置 */}
        <Card size="small" title="重置设置">
          <Space direction="vertical" style={{ width: '100%' }}>
            <Text type="secondary" style={{ fontSize: 12 }}>
              重置所有主题设置到默认状态
            </Text>
            <Button
              danger
              block
              onClick={(e) => {
                changeLayoutWithAnimation(LAYOUT_TYPES.SIDEBAR, e);
                setPrimaryColor('#1890ff');
                if (isDark) toggleTheme(e);
              }}
            >
              重置为默认设置
            </Button>
          </Space>
        </Card>
      </Space>
    </Drawer>
  );
};

export default ThemeSettings;
